import React, { memo,useEffect,useState } from 'react'
import { Menu } from 'antd';
import { Link,withRouter } from "react-router-dom";
import {useDispatch ,useSelector} from "react-redux";
import menuList from "@/common/menu_config";
import { saveTitleAction } from "../../store/actionCreator";
import { LeftWrapper } from "./style";
import logo from "@/assets/imgs/logo.png";

const { SubMenu } = Menu;

const HjLeftNav = memo(function(props) {

  // state props
  // 动态默认选中的左侧导航，根据路由url动态选择。
  const {pathname} = props.location
  const defaultSelectedKey = pathname.indexOf('product')!==-1?'product':pathname.split('/').reverse()[0]
  const defaultOpenKeys = props.location.pathname.split('/').slice(2)

  const [menus, setMenus] = useState([]);
  const [username, setUsername] = useState('');


  // redux hooks
  const dispatch = useDispatch()
  const {menus1,username1} = useSelector(state =>({
    username1:state.userInfo.user.username,
    menus1:state.userInfo.user.role.menus,
  }))

  // other hooks
  useEffect(() => {
      // console.log(props.location.pathname.split('/').slice(2));
      setMenus(menus1)
      setUsername(username1)
  }, [props,menus1,username1]);

  // 点击左侧导航，触发的函数
  const clickMenuItem = item =>{
    dispatch(saveTitleAction(item.title))
  }
  const hasAuth = (item)=>{
     //如果是超级管理员，可以查看所有菜单
     if(username==='admin')return true
     //如果没有子菜单，看当前菜单的key是否在menus中
     else if(!item.children){
       return menus.find((item2)=> item2 === item.key)
     }
     //如果有子菜单，看子菜单里的每一个菜单是否包含在menus中
    else if (item.children){
      return item.children.some((item3)=> menus.indexOf(item3.key) !== -1)
    }
  }
  // 用于动态创建左侧菜单，用的是递归。
  const createMenu = (menuList) =>{
    const menu =  menuList.map((item)=>{
       if(hasAuth(item)){
               if(!Array.isArray(item.children)){
                    return (
                       <Menu.Item key={item.key} icon={item.icon} onClick={e=>clickMenuItem(item)}>
                          <Link to={item.path}>{item.title}</Link>
                       </Menu.Item>
                    )
                 }else{
                   return (
                          <SubMenu key={item.key} icon={item.icon} title={item.title}>
                              {
                                createMenu(item.children)
                              }
                          </SubMenu>
                   )
                 }
        }else {
          return null
        }
      })
     return menu
  }

  return (
    <LeftWrapper>
          <div className="nav-header">
            <img src={logo} alt="logo" />
            <h1>俊哥管理系统</h1>
          </div>
         <Menu
            defaultSelectedKeys={[defaultSelectedKey]}
            defaultOpenKeys={defaultOpenKeys}
            mode="inline"
            theme="dark"
         >
              {
                  createMenu(menuList)
              }
         </Menu>
    </LeftWrapper>
  )
})

export default withRouter(HjLeftNav)
